<template>
  <div id="main">
    <timerSelector
      ref="timerSelector"
      :lock="lock"
      @dataChange="dataChange"
      @save="save"
      @reset="reset"
      mode="plumagram"
      @plumNumbersChange="plumNumbersChange"
    ></timerSelector>

    <div class="content">
      <diagram
        :diagram="mainDiagram"
        v-model="symbols"
        @input="refreshSymbol"
        :lock="lock"
        mode="plumagram"
        footerText="主卦"
        :showEveryDiagramName="true"
      ></diagram>

      <diagram
        :diagram="eachDiagram"
        :symbols="eachSymbols"
        footerText="互卦"
        :showEveryDiagramName="true"
      ></diagram>

      <diagram
        :diagram="changeDiagram"
        :symbols="changeSymbols"
        footerText="变卦"
        :showEveryDiagramName="true"
      ></diagram>

      <diagram
        :diagram="oppositeDiagram"
        :symbols="oppositeSymbols"
        footerText="错卦"
        :showEveryDiagramName="true"
      ></diagram>

      <diagram
        :diagram="invertDiagram"
        :symbols="invertSymbols"
        footerText="综卦"
        :showEveryDiagramName="true"
      ></diagram>
    </div>
  </div>
</template>
<script>
import core from "../core/core";

import timerSelector from "./timerSelector.vue";
import diagram from "./diagram.vue";
import { EventBus } from "../core/event-bus";
import showMessage from './messageBox';
export default {
  name: "plumagram",
  data() {
    return {
      id: this.$global.db.generateId(),
      symbols: [],
      mainDiagram: null,
      eachDiagram: null,
      eachSymbols: [],
      changeSymbols: [],
      changeDiagram: null,
      oppositeDiagram: null,
      oppositeSymbols: [],
      invertDiagram: null,
      invertSymbols: [],
      lock: false,
      tableName: "plumagrams",
      plumNumbers: [0, 0, 0],
    };
  },
  methods: {
    dataChange() {
      this.refreshSymbol();
    },

    plumNumbersChange(data) {
      this.plumNumbers = data;
      this.symbols = core.getPlumSymbols(data);
      this.refreshSymbol();
    },

    loadDiagram(data) {
      this.id = data.id;
      this.symbols = data.symbols;
      this.plumNumbers = data.plumNumbers;
      this.createDatetime = data.createDatetime;
      this.$refs.timerSelector.datetimeChange();
      this.refreshSymbol();
    },

    refreshSymbol() {
      this.mainDiagram = core.getDiagram(this.symbols);


      const symbols = this.symbols.map((x) => {
        if (x == 6) return 8;
        else if (x == 9) return 7;
        else return x;
      });

      this.changeSymbols = core.changeDiagram(this.symbols);
      this.changeDiagram = core.getDiagram(this.changeSymbols);


      this.eachSymbols = [
        symbols[1],
        symbols[2],
        symbols[3],
        symbols[2],
        symbols[3],
        symbols[4],
      ];

      //如果互卦与主卦完全一致，就从变卦取互卦
      if (this.eachSymbols.join() == symbols.join())
        this.eachSymbols = [
          this.changeSymbols[1],
          this.changeSymbols[2],
          this.changeSymbols[3],
          this.changeSymbols[2],
          this.changeSymbols[3],
          this.changeSymbols[4],
        ];

      this.eachDiagram = core.getDiagram(this.eachSymbols);


      this.oppositeSymbols = symbols.map((x) => {
        if (x == 7) return 8;
        else if (x == 8) return 7;
      });

      this.oppositeDiagram = core.getDiagram(this.oppositeSymbols);


      this.invertSymbols = symbols.reverse();

      this.invertDiagram = core.getDiagram(this.invertSymbols);

    },
    save() {
      const data = {
        id: this.id,
        owner: this.$parent.$refs.headerView.owner,
        question: this.$parent.$refs.headerView.question,
        year: this.$refs.timerSelector.year,
        month: this.$refs.timerSelector.month,
        date: this.$refs.timerSelector.date,
        time: this.$refs.timerSelector.time,
        createDatetime: this.$refs.timerSelector.createDatetime,
        symbols: this.symbols,
        mainDiagram: core.getDiagramName(this.mainDiagram),
        changeDiagram: core.getDiagramName(this.changeDiagram),
        plumNumbers: this.plumNumbers,
        remark: this.$parent.$refs.headerView.remark
      };
      this.$global.db.save(this.tableName, data, true, () => {
        this.$refs.timerSelector.saveSuccess();
      });
      // showMessage("保存成功");
    },
    reset(command) {
      if(command == "clear"){
        this.$parent.$refs.headerView.owner = "";
        this.$parent.$refs.headerView.question = "";
        this.$parent.$refs.headerView.remark = "";
        this.symbols = core.randomSymbols("plumagram");
        //继续
      }
      else(command == "reset")
        this.id = this.$global.db.generateId();
    },
  },
  mounted() {
    this.symbols = core.randomSymbols("plumagram");
    this.$refs.timerSelector.datetimeChange();
    this.refreshSymbol();
    EventBus.$on("plumagrams-load-diagram", (data) => {
      this.loadDiagram(data);
    });
    EventBus.$on("lock", (x) => (this.lock = x));
  },
  components: {
    timerSelector,
    diagram,
  },
};
</script>

<style lang="scss" scoped>
#main {
  flex-direction: column;
  flex: 1;
}
.content {
  flex: 1;
  display: flex;
  justify-content: space-around;
  box-shadow: 0px 0px 10px rgba($color: #000000, $alpha: 0.1);
  background: var(--content-bg-color);
  margin: 0 4vmin;
  border-radius: 10px;
  padding: 2vmin;
}
</style>
